<template>
  <div id="header">
    <header class="navbar navbar-default navbar-demo navbar-fixed-top eslint-nav" id="top" role="banner">
      <div class="container">

        <router-link to="/" class="navbar-brand"><img :style="{height:logoH}" alt="ESLint" src="/static/img/logo.png" itemprop="image"></router-link>

        <div class="eslint-navbar-toggles">
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#eslint-navbar" aria-controls="eslint-navbar" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <nav id="eslint-navbar" class="collapse navbar-collapse eslint-navbar">
          
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <router-link to="/docs/user-guide" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" :style="{lineHeight: linkLineheight}">首页</router-link>
            </li>
            <li class="dropdown">
              <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" :style="{lineHeight: linkLineheight}">核心产品<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><router-link to="/docs/developer-guide/architecture" :style="{lineHeight: linkLineheight}">核心产品</router-link></li>
                <li><router-link to="/docs/developer-guide/source-code" :style="{lineHeight: linkLineheight}">活性炭</router-link></li>
              </ul>
            </li>
            <li><router-link to="/blog/" :style="{lineHeight: linkLineheight}">经济效益分析</router-link></li>
            <li class="dropdown">
              <router-link to="/introduction" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" :style="{lineHeight: linkLineheight}">企业介绍</router-link>
            </li>
            <li><router-link to="/callme" :style="{lineHeight: linkLineheight}">联系我们</router-link></li>
          </ul>
        </nav>

      </div><!-- /.container -->
    </header><!-- /.navbar -->
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      logoH: 'initial',
      linkLineheight: "initial",
      headerH: "initial"
    }
  },
  methods: {

  },
  mounted () {
    this.logoH = window.innerWidth < 768 ? '100%' : 'initial';
    this.linkLineheight =  window.innerWidth < 768 ? 'initial' : '50px';
    this.headerH =  window.innerWidth < 768 ? '50px' : '80px';
    this.$router.headerH = this.headerH;
    window.onresize = () => {
      this.logoH = window.innerWidth < 768 ? '100%' : 'initial';
      this.linkLineheight =  window.innerWidth < 768 ? 'initial' : '50px';
      this.headerH =  window.innerWidth < 768 ? '50px' : '80px';
      this.$router.headerH = this.headerH;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #top{
    .container{
      nav{
        ul{
          li{
            a{
              line-height: 50px;
            }
          }
        }
      }
      .navbar-brand{
        img{
          line-height: 50px;
        }
      }
    }   
  }
</style>
